<!--
 * @Author: songxiang songxiang0806@qq.com
 * @Date: 2025-08-21 08:57:02
 * @LastEditors: songxiang songxiang0806@qq.com
 * @LastEditTime: 2025-08-28 10:53:53
 * @FilePath: \supermap-webgl\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, defineAsyncComponent, computed, onMounted } from 'vue'
import TopMenus from '/@src/views/top-menus/top-menus.vue'
import LeftMenus from '/@src/views/left-menus/left-menus.vue'
import RightMenus from '/@src/views/right-menus/right-menus.vue'
import { useTopMenusStore } from '/@src/store/top-menus/top-menus'
import { supermapReady } from '/@packages/components'

const smJs = ref('./statics/SuperMap3D/SuperMap3D.js')
const smCss = ref('./statics/SuperMap3D/Widgets/widgets.css')

const menu = useTopMenusStore()

// 异步引入，根据 store 里的 activeMenu 动态切换
const loadComponent = (name: string) => {
  if (name) {
    const url = `/@src/components/${name}/${name}.vue`
    return defineAsyncComponent(() => import(/* @vite-ignore */ url))
  }
}

const onSuperMapLoaded = () => {
  const { $myapp } = supermapReady()
  $myapp.viewer.scene.debugShowFramesPerSecond = true
}
</script>

<template>
  <SuperMapWebGL :myAppCss="smCss" :myAppJs="smJs" @loaded="onSuperMapLoaded">
    <div>
      <top-menus />
      <left-menus>
        <component :is="loadComponent('layer-manager')"></component>
      </left-menus>
      <right-menus>
        <component :is="loadComponent(menu.activeMenu)"></component>
      </right-menus>
    </div>
  </SuperMapWebGL>
</template>

<style scoped></style>
